<template>


  <div class="smain">

    <div class="comegoto">
      <router-link to="/">
      <svg t="1745315787006" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9072" width="20" height="20"><path d="M695.9 958.1c-12.4 0-24.7-4.7-34.2-14.2L325.9 608.1c-53.5-53.5-53.5-140.5 0-193.9L661.8 78.4c18.9-18.9 49.5-18.9 68.3 0 18.9 18.9 18.9 49.5 0 68.3L394.2 482.5c-15.8 15.8-15.8 41.5 0 57.3L730 875.6c18.9 18.9 18.9 49.5 0 68.3-9.3 9.5-21.7 14.2-34.1 14.2z" p-id="9073"></path></svg>
      </router-link>
    </div>

    <div class="container-signin">

      <div class="container-signin-left"></div>
      <div class="container-signin-right">
       
        <h1>Sign in to <span>Little Rascal</span></h1>
        <h3>Welcome to Little Rascal,For a better experience,please enter your login information below.</h3>

        <div class="fomrsign">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
        >

        <el-form-item prop="email">
          <el-input
            v-model="ruleForm.email"
            placeholder="Email Address"
            />
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            v-model="ruleForm.password"
            placeholder="Password"
            type="password"
            />
        </el-form-item>

        <p><router-link to="/Forgot">Forgot the password?</router-link></p>

            <div class="center-button">
              <el-form-item  style="margin-bottom: 0;">
                <el-button type="primary" @click="submitForm(ruleFormRef)">SIGN IN</el-button>
              </el-form-item>
              </div>

        </el-form>
        </div>

         <h2>
          <router-link to="/Signup">Sign up</router-link>
        </h2>

      </div>
    </div>
  </div>


</template>

<script lang="ts" setup>
import { ref } from 'vue'
</script>

<script lang="ts">

import { reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import createAxios from '../utils/axios'
import { useUserInfo } from '../stores/userInfo'

// const usernfo = useUserInfo()
// usernfo.dataFill({})
// usernfo.setToken('')


const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive({
  email:'',
  password:'',
  password2:'',
})


const rules = reactive({
  email: [
    { required: true, message: 'Please enter email address', trigger: 'blur' },
    { type:"email", message: 'Please input correct email address', trigger: 'blur' },
  ],
  password: [
    { required: true, message: 'Please enter password', trigger: 'blur' },
  ]
})

// 提交
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      //window.location.href = '/Result';
      // 请求接口
      console.log('登录操作', useUserInfo())
      createAxios({
            url: '/frontend/account/login',
            data: ruleForm,
            method: 'post',
        },{showSuccessMessage: true,})
        .then((res) => {
            // 设置缓存
            console.log('token', res.data.token)
            console.log(res.data.user)
            console.log(res.data)

            const usernfo = useUserInfo()
            usernfo.dataFill(res.data.user)
            usernfo.setToken(res.data.token)

            setTimeout(function(){window.location.href = '/Myhome'}, 1000)
        })
        .finally((err) => {
            console.log('err', err)
        })
    }
  })


}


export default {
  data() {
    return {
      pageTitle: 'Sign in',
      };
  },
  created() {
    this.updateTitle();
  },
  methods: {

    updateTitle() {
      document.title = this.pageTitle; // 或者根据需要动态设置标题
    }
  }

}

</script>

<style>

.comegoto {
  position: fixed;
  top: 50px;
  left: 50px;
  cursor: pointer;
}
  :root {
   --el-component-size:46px !important;;
  }

.smain {
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center;
    height: 100vh;
    .el-button {
      height: 46px !important;;
      line-height: 46px !important;;
    }
    .el-form-item {
      padding-bottom: 2px;
      padding-top: 10px;
    }

  }

.container-signin {
  display: flex;
  justify-content: space-between;
  max-width: 1520px;
  min-width: 1000px;
  background-color: #ffffff;
  -webkit-box-shadow: 0 0 20px 5px rgba(0, 0, 0, .08);
  box-shadow: 0 0 20px 5px rgba(0, 0, 0, .08);
  border-radius: 10px;
  padding: 10px;
  .fomrsign {
    padding: 20px 50px 0 50px;
    p {
      text-align: center;

      font-weight: 600;
      a {
        color: #e62424;
      }
    }
    .center-button {
      padding: 20px 0 0 0;
      width: 100%;
      .el-button {
        border: 0;
        width: 100% !important;
        font-weight: 600;
        background: #e62424;
      }
    }
  }

  .container-signin-left {
    background-image: url(/public/images/signin.jpg);
    background-size: cover;
    width: 500px;
    height: 550px;
    border-radius: 10px;
  }
  .container-signin-right{
    width: 500px;
    padding: 20px 30px;
    h2 {
      font-weight: 500;
      font-size: 14px;
      margin-top: 20px;
      text-align: center;
      a {
      color: #666;
      }
    }
    h1 {
      text-align: center;
      font-size: 16px;
      padding-top: 40px;
      span {
        color: #e62424;
      }
    }
    h3 {
      font-weight: 500;
      text-align: center;
      font-size: 14px;
      line-height: 26px;
      padding: 20px 30px;
      color: #666;
    }

  }
}
@media only screen and (max-width: 1000px) {
  .comegoto {
  position: fixed;
  top: 4%;
  left: 5%;
}
  .smain {
    align-items:baseline
  }
  .container-signin {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    display: inline-block;
    padding: 5%;
    border-radius: 0;
    margin: 0 auto;
    box-shadow:0 0 0 0 rgba(0, 0, 0, .0) !important;
  }
  .container-signin-left {
    display: none;
  }
  .container-signin-right {
    width: 100% !important;
    padding: 0 !important;
    h2 {
      border-top: 0;
      margin-top:10px !important;
      font-size: 16px !important;
    }
    h1 {
      padding-top: 120px !important;
    }
    h3 {
      padding: 20px 10px !important;
    }
    .fomrsign {
      padding: 0 30px ;
    }
  }


}
</style>
